<meta args="data" />
<div >
    <table class="table table-middle table-striped table-hover table-bordered table-condensed" style="width: 100%;">
        <tr>
            <td colspan="5">
                <div class="form-inline">
                    高度：<input placeholder="不填写取默认值" type="number" class="form-control input-sm" s s-data="data.height" id="height" />
                    <a href="javascript:;" class="btn btn-xs btn-default pull-right" s-click="remove(this)"><i class="fa fa-remove "></i> 删除</a>
                </div>
            </td>
        </tr>
        <tr class="rows-sort-handle">
            <th>标题</th>
            <th>标语</th>
            <th>页面</th>
            <th>高度</th>
            <th class="text-right">
                操作
            </th>
        </tr>
        <tbody s="nda,loop" id="showcaseList" s-data="data.showcaseList">
        <tr s-loop-role="empty">
            <td colspan="5">
                <div class="p text-center">
                    未查询到数据
                </div>
            </td>
        </tr>
        <tr s-loop-role="row" class="row-showcase" s="datac" s-check-role="i">
            <td>
                <div name="title"></div>
                <div s="tpl">
                    <img src="{%=this.picUrl%}" style="max-height: 100px; max-width: 100px;" />
                </div>
            </td>
            <td>
                <div name="slogan"></div>
            </td>
            <td name="pageTitle"></td>
            <td name="height"></td>
            <td class="text-right">
                <input autocomplete="off" type="button" class="btn btn-xs btn-link" s-click="delRow(this)" value="删除"/>
                <input autocomplete="off" type="button" class="btn btn-xs btn-link" s-click="edit(this)" value="编辑"/>
            </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="5">
                <div class="btn-group">
                    <a href="javascript:;" class="btn btn-link btn-xs"
                       s-click="add()">
                        <i class="fa fa-plus"></i> 新增
                    </a>
                </div>
            </td>
        </tr>
        </tfoot>
    </table>
</div>
<script>
    function remove($this) {
        S.confirm("确认删除吗？").done(function() {
            $this.node.parentsUntil(".floor-row").parent().remove();
        })
    }

    function delRow(s) {
        s.node.closest("tr").remove();
    }
    function edit(s) {
        S.popupOpen("/operation-center/showcase.html", {showcase: s.parent().data()}).done(function (rs) {
            rs && s.parent().data(rs)
        });
    }

    function add() {
        S.popupOpen("/operation-center/showcase.html").done(function (rs) {
            rs && $showcaseList.addRow(rs, 'append')
        });
    }

    S.getContent = function() {
        var showcaseList = [];
        $showcaseList.node.find(".row-showcase").each(function () {
            var node = $(this);
            var $showcase = Smart.of(node);
            var data = $showcase.data();
            showcaseList.push(data);
        })
        return {
            showcaseList: showcaseList,
            height: $height.node.val()
        }
    }
</script>